<template>
  <div class="wrapper">
    <div class="header">
      <mu-appbar :z-depth="0" color="primary">
        <mu-button icon slot="left" to="/">
          <mu-icon value="chevron_left" size="36"></mu-icon>
        </mu-button>
        <div class="title">{{title}}</div>
        <mu-button icon slot="right"></mu-button>
      </mu-appbar>
    </div>
    <div class="content" ref="wrapper">
      <div>
        <unnormal :abnoNum="abnoNum"></unnormal>
        <div class="reportDetail">
          <mu-tabs
            :value.sync="currentTabComponent"
            inverse
            center
            color="primary"
            indicator-color="primary"
          >
            <mu-tab value="SynQuota">全部指标</mu-tab>
            <mu-tab value="SynAbnomal">异常指标</mu-tab>
            <mu-tab value="SynAdvise">综述建议</mu-tab>
          </mu-tabs>
          <keep-alive>
            <component
              :is="currentTabComponent"
              :quotaList="quotaList"
              :adviseList="adviseList"
              :abnomalList="abnomalList"
              @handleShowGallary="handleShowGallary"
            ></component>
          </keep-alive>
        </div>
      </div>
    </div>
    <common-gallary :imgs="imgs" v-show="showGalary" @close="closeGallary"></common-gallary>
  </div>
</template>

<script>
import CommonGallary from '@/common/gallary/Gallary'
import Unnormal from './components/Unnormal'
import SynQuota from './components/SynQuota'
import SynAdvise from './components/SynAdvise'
import SynAbnomal from './components/SynAbnomal'
import BScroll from 'better-scroll'
import axios from 'axios'
import { mapState } from 'vuex'
export default {
  name: 'Report',
  components: {
    CommonGallary,
    Unnormal,
    SynQuota,
    SynAdvise,
    SynAbnomal
  },
  data () {
    return {
      title: '体检结果',
      currentTabComponent: 'SynQuota',
      id: this.$route.params.id,
      showGalary: false,
      quotaList: [],
      adviseList: [],
      abnomalList: [],
      abnoNum: 0,
      imgs: []
    }
  },
  computed: {
    ...mapState(['token'])
  },
  methods: {
    handleShowGallary (imgs) {
      this.showGalary = true
      this.imgs = imgs
    },
    closeGallary () {
      this.showGalary = false
    },
    handleGetReportData () {
      axios.get('/api/reportdetail.do', {params: {token: this.token, id: this.$route.params.id}})
        .then(this.getReportDataSucc)
    },
    getReportDataSucc (res) {
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.quotaList = data.quotaList
        this.adviseList = data.adviseList
        this.abnomalList = data.abnomalList
        this.abnoNum = data.abnonum
      }
    }
  },
  mounted () {
    this.scroll = new BScroll(this.$refs.wrapper, {
      click: true,
      bounce: {
        top: false
      }
    })
  },
  activated () {
    this.handleGetReportData()
  }
}
</script>

<style lang="stylus" scoped>
  .header >>> .mu-appbar-left
    padding-right: 0
  .header
    position: fixed
    left: 0
    top: 0
    right: 0
    height: 1.12rem
    z-index: 101
    .title
      text-align: center
      height: 1.12rem
  .content
    position: absolute
    top: 1.12rem
    left: 0
    right: 0
    bottom: 0
</style>
